:root {
    --ctn-w: 380px;
    --red: #FF4D4F;
    --yellow: #FCD753;
    --green: #ACD03C;
    --cup-bg-enter: scale(3);
    --cup-bg-leave: scale(0);
    --cup-left: translateX(calc(0px - var(--ctn-w) / 2)) scale(.5);
    --cup-active: trnaslateX(0) scale(1);
    --cup-right: translateX(calc(var(--ctn-w) / 2)) scale(.5);
    --content-left: translateX(calc(-100% - 32px));
    --content-active: translateX(0);
    --content-right: translateX(calc(100% + 32px));
    --start-color: var(--red);
    --end-color: var(--yellow);
    --animation-timing-function: cubic-bezier(0.85, 0.88, 0.45, 1.5);
    --animation: 1s linear;
    --transition: .4s var(--animation-timing-function);
}

* {
    margin: 0;
    padding: 0;
}

body {
    --bg: var(--red);
    --animation-delay: 0s;

    height: 100vh;
    width: 100vw;
    font-family: PingFang TC;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #04050a;
}

.page-bg {
    @keyframes gradientShift {
        0% {
            background-position:
                10% 10%, 50% 50%, 90% 90%,
                0% 0%, 0% 0%;
            background-size:
                150% 150%, 150% 150%, 150% 150%,
                100% 100%, 100% 100%;
        }

        50% {
            background-position:
                90% 90%, 10% 10%, 50% 50%,
                100% 100%, 100% 100%;
            background-size:
                180% 180%, 180% 180%, 180% 180%,
                120% 120%, 120% 120%;
        }

        100% {
            background-position:
                10% 10%, 50% 50%, 90% 90%,
                0% 0%, 0% 0%;
            background-size:
                150% 150%, 150% 150%, 150% 150%,
                100% 100%, 100% 100%;
        }
    }

    @keyframes twinkle {
        from {
            opacity: 0.2;
        }

        to {
            opacity: 0.5;
        }
    }

    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--red) 0%, transparent 30%),
    linear-gradient(225deg, var(--yellow) 0%, transparent 30%),
    linear-gradient(315deg, var(--green) 0%, transparent 30%),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
    background-size: 150% 150%,
    150% 150%,
    150% 150%,
    100% 100%,
    100% 100%;
    background-position: 10% 10%,
    50% 50%,
    90% 90%,
    0% 0%,
    0% 0%;
    animation: gradientShift 15s ease infinite;
    filter: blur(40px);
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(2px 2px at 20% 30%, #fff, transparent),
            radial-gradient(2px 2px at 40% 70%, #fff, transparent),
            radial-gradient(2px 2px at 80% 40%, #fff, transparent),
            radial-gradient(2px 2px at 60% 10%, #fff, transparent),
            radial-gradient(2px 2px at 10% 90%, #fff, transparent);
        background-size: 100px 100px;
        background-repeat: repeat;
        opacity: 0.3;
        animation: twinkle 4s ease-in-out infinite alternate;
        z-index: -1;
    }
}

main {
    position: relative;
    height: 96vh;
    width: var(--ctn-w);
    border-radius: 54px;
    background-color: var(--bg);
    overflow: hidden;
    transition: var(--transition) background-color;
    animation-play-state: paused !important;
    animation-delay: var(--animation-delay) !important;

    @media screen and (max-width: 400px) {
        width: 100dvw;
        height: 100dvh;
        border-radius: 0;
    }
}

.bg {
    position: absolute;
    inset: 0;

    &::before {
        content: "";
        position: absolute;
        top: calc(30% + 16vh);
        left: 50%;
        height: 0;
        width: 0;
        box-shadow: 0 0 16vh 18vh #fff;
        transform: scaleY(.8) translateX(-50%);
    }

    img {
        position: absolute;
        top: 8%;
        left: 4%;
        height: 30%;
        width: 92%;
        object-fit: contain;
        pointer-events: none;
        transform: var(--cup-bg-leave);
        transition: var(--transition);
        opacity: 0;
        animation-play-state: paused !important;
        animation-delay: var(--animation-delay) !important;

        &.active {
            opacity: 1;
            transform: scale(1);
            z-index: 1;
        }

        &.enter {
            transition: none;
            transform: var(--cup-bg-enter);
            opacity: 0;
            z-index: 2;
        }
    }

    .green-bg {
        scale: 1.4;
    }
}

.cup {
    position: absolute;
    bottom: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30%;

    &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: -16px;
        left: 50%;
        width: 100px;
        height: 24px;
        background-color: var(--bg);
        transform: translateX(-50%);
        transition: var(--transition) background-color;
        border-radius: 50%;
        filter: blur(10px);
        z-index: 2;
        opacity: .4;
        animation-play-state: paused !important;
        animation-delay: var(--animation-delay) !important;
    }

    img {
        position: absolute;
        height: 100%;
        width: 50%;
        object-fit: contain;
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, .4));
        transform-origin: center 36%;
        transition: var(--transition);
        animation-play-state: paused !important;
        animation-delay: var(--animation-delay) !important;
        z-index: 1;

        &.active {
            z-index: 2;
            transform: var(--cup-active);
        }

        &.left {
            transform: var(--cup-left);
        }

        &.right {
            transform: var(--cup-right);
        }
    }
}

.content {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
    height: 330px;
    background-color: #fff;
    border-radius: 42px;
    color: #696969;
    z-index: 1;

    form {
        position: relative;
        width: calc(100% - 32px);
        height: calc(100% - 90px);
        margin-top: 90px;
        margin-left: 16px;
        overflow: hidden;
    }

    article {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: var(--transition);
        animation-play-state: paused !important;
        animation-delay: var(--animation-delay) !important;

        &.left {
            transform: var(--content-left);
        }

        &.right {
            transform: var(--content-right);
        }

        &.active {
            transform: var(--content-active);
        }

        &.no-transition {
            transition: none;
        }

        h1 {
            font-size: 26px;
            color: #000;
        }

        .temp,
        .sugar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            white-space: nowrap;
            gap: 6px;
            margin-top: 6px;
            font-size: 14px;

            span {
                margin-right: 8px;
            }


            input {
                display: none;
            }

            label {
                display: block;
                height: 36px;
                width: 72px;
                line-height: 36px;
                text-align: center;
                border-radius: 6px;
                background-color: #F6F7F8;
                transition: .1s ease-in-out;
            }

            input:checked+label {
                background-color: #E7F6FF;
            }
        }

        .temp {
            margin-top: 20px;
        }
    }

    button {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        height: 52px;
        border-radius: 26px;
        font-size: 16px;
        outline: none;
        border: none;
        color: #fff;
        background-color: var(--bg);
        transition: var(--transition) background-color;
        cursor: pointer;
        animation-play-state: paused !important;
        animation-delay: var(--animation-delay) !important;
    }
}

// 控制不同状态
body.red {
    --bg: var(--red);
}

body.yellow {
    --bg: var(--yellow);
}

body.green {
    --bg: var(--green);
}

// 动画控制
@keyframes main {
    0% {
        background-color: var(--start-color);
    }

    100% {
        background-color: var(--end-color);
    }
}

@keyframes cup-bg-show {
    0% {
        opacity: 0;
        transform: var(--cup-bg-enter);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cup-bg-hide {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: var(--cup-bg-leave);
    }
}

@keyframes cup-lr {
    0% {
        transform: var(--cup-left);
    }

    100% {
        transform: var(--cup-right);
    }
}

@keyframes cup-rl {
    0% {
        transform: var(--cup-right);
    }

    100% {
        transform: var(--cup-left);
    }
}

@keyframes cup-al {
    0% {
        transform: var(--cup-active);
    }

    100% {
        transform: var(--cup-left);
    }
}

@keyframes cup-la {
    0% {
        transform: var(--cup-left);
    }

    100% {
        transform: var(--cup-active);
    }
}

@keyframes cup-ar {
    0% {
        transform: var(--cup-active);
    }

    100% {
        transform: var(--cup-right);
    }
}

@keyframes cup-ra {
    0% {
        transform: var(--cup-right);
    }

    100% {
        transform: var(--cup-active);
    }
}

@keyframes cup-shadow {
    0% {
        background-color: var(--start-color);
    }

    100% {
        background-color: var(--end-color);
    }
}

@keyframes content-lr {
    0% {
        transform: var(--content-left);
    }

    100% {
        transform: var(--content-right);
    }
}

@keyframes content-rl {
    0% {
        transform: var(--content-right);
    }

    100% {
        transform: var(--content-left);
    }
}

@keyframes content-al {
    0% {
        transform: var(--content-active);
    }

    100% {
        transform: var(--content-left);
    }
}

@keyframes content-la {
    0% {
        transform: var(--content-left);
    }

    100% {
        transform: var(--content-active);
    }
}

@keyframes content-ar {
    0% {
        transform: var(--content-active);
    }

    100% {
        transform: var(--content-right);
    }
}

@keyframes content-ra {
    0% {
        transform: var(--content-right);
    }

    100% {
        transform: var(--content-active);
    }
}

main.left-right,
main.right-left {
    animation: var(--animation);
    animation-name: main;

    .buy-now {
        animation: var(--animation);
        animation-name: main;
    }
}

main.left-right {
    .bg {
        .active {
            animation: var(--animation);
            animation-name: cup-bg-hide;
        }

        .left {
            animation: var(--animation);
            animation-name: cup-bg-show;
        }
    }

    .cup {
        &::after {
            animation: var(--animation);
            animation-name: cup-shadow;
        }

        img {
            animation: var(--animation);
        }

        .active {
            animation-name: cup-ar;
        }

        .left {
            animation-name: cup-la;
            z-index: 2;
        }

        .right {
            animation-name: cup-rl;
        }
    }

    article {
        animation: var(--animation);

        &.active {
            animation-name: content-ar;
        }

        &.left {
            animation-name: content-la;
        }
    }
}

main.right-left {
    .bg {
        .active {
            animation: var(--animation);
            animation-name: cup-bg-hide;
        }

        .right {
            animation: var(--animation);
            animation-name: cup-bg-show;
        }
    }

    .cup {
        &::after {
            animation: var(--animation);
            animation-name: cup-shadow;
        }

        img {
            animation: var(--animation);
        }

        .active {
            animation-name: cup-al;
        }

        .left {
            animation-name: cup-lr;
        }

        .right {
            animation-name: cup-ra;
            z-index: 2;
        }
    }

    article {
        animation: var(--animation);

        &.active {
            animation-name: content-al;
        }

        &.right {
            animation-name: content-ra;
        }
    }
}

main.ending {
    --animation: 1s var(--animation-timing-function);
}